
<template>
    <div class="page">
        <v-front-header></v-front-header>
        <el-row :gutter="20" style="height:631px;width:100% display:flex;position:relative">
            <!--左边的标题文字-->
            <el-col :span="14">
                <div style="height:100%;magin-left:30px">
                    <h2
                        style="width: 100%;display: flex;justify-content: center;align-items: center;padding-top:50px;padding-bottom:30px"
                    >{{course.course_name}}</h2>

                    <div style="width: 100%;display: flex;padding-left:60px;padding-right:40px">
                        <span
                            style="line-height:32px"
                        >&#8194; &#8194; &#8194; {{course.course_content}}</span>
                    </div>
                </div>
            </el-col>
            <!--右边的图片文字-->
            <el-col :span="10">
                <div
                    
                    style="width: 100%;padding-left:120px;padding-top:40px"
                >
                    <el-card :body-style="{ padding: '0px'}" style="padding-left:50px;width:260px;height:380px;">
                        <div style="align-items:center">
                            <img
                                style="height:200px;padding-top:20px;padding-bottom:20px;"
                                :src="course.image_url"
                            />
                            <div style>
                                <p>课程名：{{course.course_name}}</p>
                                <p>课程类型：{{course.nature.nature_name}}</p>
                                <p>学分：{{course.credit}}</p>
                                <p>学时：{{course.period}}</p>
                                <p>所属学院：{{course.college.college_name}}</p>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
        <v-front-bottom></v-front-bottom>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
import { getRequest } from '../../api/index';
import { postRequest } from '../../api/index';
import vFrontHeader from '../common/FrontHeader';
import vFrontBottom from '../common/FrontBottom';
export default {
    name: 'CoursesDetail',
    components: {},
    data: function() {
        return {
            course: {},
            course_id: 7,
            n_name: {},
            c_name: {}
        };
    },
    components: {
        vFrontHeader,
        vFrontBottom
    },
    created() {
        this.course_id = Number(this.$route.query.course_id);
        this.getCoursesDetailData();
    },
    methods: {
        getCoursesDetailData() {
            // TODO 接口请求
            getRequest('/public/course/getdetail', {
                course_id: this.course_id
            }).then(res => {
                console.log('详情接口');
                this.course = res.data;
                console.log(this.course);
            });
        }
    }
};
</script>

<style scoped>
.page {
    height: 100%;
}
ul {
    list-style: none;
}
</style>